<template>
  <view
    class="content"
    :style="{ backgroundImage: `url(${indexBackgroundImage})` }"
  >
    <view class="main">
      <view class="goBack" @tap="nextPage(`/pages/index/index?type=big`)">
        <u-icon name="arrow-left"></u-icon>
      </view>
      <view class="title">
        <view class="big">
          <text>欢迎登录</text>
        </view>
        <view class="little">
          <text>杭州市红十字会</text>
        </view>
      </view>
      <view class="box">
        <image src="/static/login/bg2.png" class="boxImg" mode=""></image>
        <view class="login">
          <view class="detail">
            <view class="user">
              <image src="/static/login/tel.png" mode=""></image>
              <text>|</text>
              <input
                type="text"
                placeholder="请输入手机号码"
                maxlength="11"
                placeholder-style="{
								width: 206rpx;
								font-size: 26rpx;
								padding-left: 5rpx;
								font-family: SourceHanSansCN;
								font-weight: 400;
								color: #C1C1C1;
							}"
                v-model="phone"
                value=""
              />
            </view>
            <view class="line"></view>
            <view class="pwd">
              <image src="/static/login/pwd.png" mode=""></image>
              <text>|</text>
              <input
                type="text"
                placeholder="请输入6位验证码"
                placeholder-style="{
								width: 206rpx;
								font-size: 26rpx;
								padding-left: 5rpx;
								font-family: SourceHanSansCN;
								font-weight: 400;
								color: #C1C1C1;
							}"
                maxlength="6"
                value=""
                v-model="code"
              />
              <view
                class="code"
                :class="isSendCode ? 'node' : 'auto'"
                @click="onSendCode"
              >
                <text>{{ countText }}</text>
              </view>
            </view>
          </view>
          <view :class="isBtn ? 'button-1' : 'button'">
            <button type="default" @tap="login" :disabled="isBtn">登录</button>
          </view>
        </view>
        <text class="all"
          >登录代表你已经同意<text class="tip">《用户协议》</text>和<text
            class="tip"
            >《隐私权政策》</text
          ></text
        >
      </view>
      <view class="other">
        <view class="otherText">
          <text>— 其他登录方式 —</text>
        </view>
        <view class="wx">
          <image src="/static/login/wx.png" mode=""></image>
          <text>微信</text>
        </view>
        <view class="otherBottom">
          <text>登录遇到问题?</text>
          <text class="line">|</text>
          <text @tap="nextPage(`/pages/login/login?type=big`)">密码登录</text>
        <!--  <text class="line">|</text>
          <text @tap="nextPage(`/pages/zc/zc?type=big`)">注册</text> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import indexBackgroundImage from "@/static/login/bg1.png";
import loginMinxis from "@/minxis/login";
export default {
  mixins: [loginMinxis],
  components: {},
  data() {
    return {
      indexBackgroundImage: indexBackgroundImage,
    };
  },

  methods: {
    //进行验证接口
    login() {
      console.log(this.code, this.phone);
	  this.smsLogin();
    },
    //跳转列表对应页面
    nextPage(url) {
      uni.navigateTo({
        url: url,
        fail() {
          uni.switchTab({
            url: url,
            fail() {
              uni.showToast({
                title: "暂未开通，敬请期待！",
                icon: "none",
              });
            },
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100vh;
  .main {
    .goBack {
      position: absolute;
      padding: 30rpx 0 0 20rpx;
      .u-icon {
        font-size: 50rpx;
        color: #ffffff;
      }
    }
    .title {
      padding: 200rpx 0 30rpx 80rpx;
      .big {
        font-size: 50rpx;
        font-family: SourceHanSansCN;
        font-weight: bold;
        color: #ffffff;
      }
      .little {
        margin-top: 20rpx;
        font-size: 40rpx;
        font-family: SourceHanSansCN;
        font-weight: 500;
        color: #ffffff;
      }
    }
    .box {
      position: relative;
      margin: 0 30rpx;
      height: 534rpx;
      background: #ffffff;
      border-radius: 31px;
      box-shadow: #dcdfe6 0 0 10rpx 0;
      .boxImg {
        position: absolute;
        top: -210rpx;
        right: 35rpx;
        width: 228rpx;
        height: 251rpx;
      }
      .login {
        margin: 0 50rpx;
        padding-top: 120rpx;
        .detail {
          padding: 0 10rpx;
          .user {
            display: flex;
            align-items: center;
            image {
              width: 25rpx;
              height: 29rpx;
            }
            text {
              margin: 0 15rpx;
              color: #c1c4c8;
            }
            input {
              width: 100%;
            }
          }
          .line {
            margin: 30rpx 0;
            width: 100%;
            height: 1rpx;
            background: #848484;
            opacity: 0.2;
          }
          .pwd {
            display: flex;
            align-items: center;
            image:first-child {
              width: 40rpx;
              height: 31rpx;
            }
            text {
              margin: 0 15rpx;
              color: #c1c4c8;
            }
            input {
              width: 100%;
            }
            .code {
              width: 280rpx;
              height: 49rpx;
              background: #edf1ff;
              border-radius: 5px;
			  text-align: center;
              text {
                font-size: 26rpx;
                font-family: SourceHanSansCN;
                font-weight: 400;
                color: #5175ff;
              }
            }
          }
        }
        .button {
          margin-top: 60rpx;
          width: 100%;
          height: 85rpx;
          box-shadow: 0px 6px 10px 0px rgba(22, 121, 253, 0.28);
          border-radius: 18px;
          button {
            background: linear-gradient(-45deg, #4f73ff 0%, #6181ff 100%);
            color: #ffffff;
          }
        }
        .button-1 {
          margin-top: 60rpx;
          width: 100%;
          height: 85rpx;
          box-shadow: 0px 6px 10px 0px rgba(22, 121, 253, 0.28);
          border-radius: 18px;
          button {
            background: linear-gradient(-45deg, #565656 0%, #6e6e6e 100%);
            color: #ffffff;
          }
        }
      }
      .all {
        position: absolute;
        bottom: 35rpx;
        right: 0;
        left: 0;
        margin: 0 auto;
        text-align: center;
        font-size: 20rpx;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #666666;
        .tip {
          color: #f34242;
          font-weight: bold;
        }
      }
    }
    .other {
      margin-top: 100rpx;
      text-align: center;
      .otherText {
        font-size: 26rpx;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #656565;
        opacity: 0.51;
      }
      .wx {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 40rpx;
        image {
          width: 84rpx;
          height: 82rpx;
        }
        text {
          margin-top: 15rpx;
          font-size: 24rpx;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: #505050;
          opacity: 0.5;
        }
      }
      .otherBottom {
        margin-top: 50rpx;
        text {
          font-size: 24rpx;
          font-family: AlibabaPuHuiTi;
          font-weight: 400;
          color: #568dea;
        }
        .line {
          margin: 0 15rpx;
          color: #c1c4c8;
        }
      }
    }
  }
}
</style>
